<template>
  <a-card
    style="
      width: 100%;
      height: 100%;
      background: #1e1e20;
      border: 1px solid #1e1e20;
    "
  >
    <template #title>
      <div class="tab_con">
        <div
          class="tab_item"
          :class="currentIndex == index ? 'active' : ''"
          @click="tabChange(index)"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </template>
    <div class="set_con">
      <div class="main_con" style="margin-top: 20px" v-if="currentIndex == 0">
        <span class="cut_title">计划剪辑数量：</span>
        <a-input-number
          style="
            width: 120px;
            background-color: rgba(62, 59, 59, 1);
            border: none;
            color: #eee;
          "
          v-model:value="setForm.num"
          :min="1"
          :max="1000"
        />
      </div>
      <div class="main_con" v-if="currentIndex == 1">
        <div class="form_item" v-for="(item, index) in formList" :key="index">
          <div class="form_title">{{ item.name }}</div>
          <div class="form_con">
            <a-switch
              style="width: 50px"
              v-model:checked="formList[index].value"
              checked-children="开"
              un-checked-children="关"
            />
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import store from "../../../../../store";
export default defineComponent({
  setup(props, context) {
    const state = reactive({
      tabList: [
        {
          name: "基础设置",
          key: "base_set",
        },
        {
          name: "高级设置",
          key: "senior_set",
        },
      ],
      currentIndex: 0,
      setForm: {
        num: 5,
      },
      formList: [
        {
          key: "video_volume",
          name: "视频原声",
          value: false,
        },
        {
          key: "audio_volume",
          name: "智能配音",
          value: true,
        },
        {
          key: "bgm_volume",
          name: "背景音乐",
          value: true,
        },
        {
          key: "title",
          name: "视频标题",
          value: true,
        },
        {
          key: "subtitle",
          name: "视频字幕",
          value: true,
        },
      ],
    });
    const tabChange = (index) => {
      if (state.currentIndex == index) return;
      state.currentIndex = index;
    };

    watch(
      () => state.setForm.num,
      (val) => {
        store.dispatch("SetAiComposeConfigData", {
          num: val,
        });
      }
    );
    watch(
      () => state.formList,
      (val) => {
        let data = null;
        data = {};
        val.forEach((item) => {
          data[item.key] = item.value;
        });
        store.dispatch("SetAiComposeConfigData", data);
        store.dispatch("SetClipJSONVolume", {
          video_volume: data.video_volume ? 100 : 0,
          bgm_volume: data.bgm_volume ? 25 : 0,
          audio_volume: data.audio_volume ? 100 : 0,
        });
      },
      { deep: true, immediate: true }
    );

    watch(
      () => store.getters.clipJSON?.ai_compose_config,
      (val) => {
        if (val) {
          state.setForm.num = val?.num;
          state.formList[0].value = val?.video_volume;
          state.formList[1].value = val?.audio_volume;
          state.formList[2].value = val?.bgm_volume;
          state.formList[3].value = val?.title;
          state.formList[4].value = val?.subtitle;
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );
    return {
      ...toRefs(state),
      tabChange,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ss-card-head) {
  border-bottom: 1px solid #000 !important;
  flex-shrink: 0;
  height: 45px;

  .ss-card-head-title {
    padding: 9px 0;
  }
}

.tab_con {
  display: flex;

  .tab_item {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    margin-left: 10px;
    color: #eee;
    font-size: 14px;

    &:nth-child(1) {
      margin-left: 0;
    }

    &.active {
      background-color: #3a3a3c;
    }
  }
}

.set_con {
  display: flex;
  flex-wrap: wrap;

  .main_con {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .cut_title {
      color: #999;
    }

    .form_item {
      display: flex;
      align-items: center;
      width: 33.3%;
      margin-top: 20px;

      .form_title {
        color: #999;
        font-size: 14px;
      }

      .form_con {
        margin-left: 10px;

        :deep(.ss-switch) {
          background: #ffffff33;
        }
        :deep(.ss-switch.ss-switch-checked) {
          background: var(--ss-primary-color);
        }
      }
    }
  }
}
</style>
